/* Eded.Wang 2016-10-01 */

//获取舞台 DOM 元素.
var stage = document.getElementById('stage');
//获取音频 DOM 元素.
var audio = document.getElementById('rp-audio');
//获取加载 DOM 元素.
var loading = document.getElementById('loading');
//获取容器 DOM 元素.
var container = document.getElementById('container');
//控制台表单.
var consoleForm = document.getElementById('console-form');
//发音图展示.
var mouth = document.getElementById('rp-mouth');
//音标 DOM 元素集合.
var items = document.querySelectorAll(".rp-list li");

//播放范围.
var range = {
  start: 0,
  end: 1
};
//是否打开声音关联.
var isSound = consoleForm.sound.checked;
//是否打开视频关联.
var isVideo = consoleForm.video.checked;
//是否打开单词关联.
var isWord = consoleForm.word.checked;
//是否打开图示关联.
var isMouth = consoleForm.mouth.checked;
//视频资源地址
var baseUrl = '//oedu9o1bk.qnssl.com/video/english/';

//如果声音默认打开，则尝试预加载声音.
if (isSound) {
  audio.preload = "auto";
}
//如果是本地地址，则为视频资源增加 HTTPS 协议.
if (location.origin == 'file://') {
  baseUrl = 'https://' + baseUrl;
}

consoleForm.sound.addEventListener('change', function(e) {
  if (audio.readyState != 4) {
    audio.play();
  }
  isSound = this.checked;
  //重置舞台内容.
  stage.innerHTML = "";
});
consoleForm.video.addEventListener('change', function(e) {
  isVideo = this.checked;
  //重置舞台内容.
  stage.innerHTML = "";
});
consoleForm.word.addEventListener('change', function(e) {
  if (true) {
    alert("该功能正在开发中……");
  }
  isWord = this.checked;
});
consoleForm.mouth.addEventListener('change', function(e) {
  isMouth = this.checked;
  mouth.style.display = isMouth ? 'block' : 'none';
});

audio.addEventListener('loadeddata', function(e) {
  console.log(e);
  console.log("声音加载成功！");
});
audio.addEventListener('load', function(e) {
  console.log("audio load");
});

audio.addEventListener('timeupdate', function(e) {
  var nowTime = this.currentTime.toFixed(2);
  //console.log(nowTime, range.end);
  if (nowTime >= range.end && !!range.end) {
    this.pause();
  }
  console.log(nowTime);
});

//音标委派单击事件.
for (var k in items) {
  items[k]['style'] && items[k].addEventListener('click', function(e) {

    var targetHTML = '<h3>' + this.innerHTML + '</h3>';
    var data = this.dataset;
    //获取音标 ID.
    var id = data['id'];

    //未设置 id，或者 id 找不到数据，则只设置标题，不再继续.
    if ( !id || !audioData[id] ) {
      //设置音标提示内容.
      stage.innerHTML = targetHTML;
      return;
    }

    //设置提示文字.
    targetHTML += '<p>' + audioData[id]['text'] + '</p>';

    //声音打开，则更新声音.
    if (isSound) {
      targetHTML += '<button onclick="itemPlay()">重听音标</button>';
      itemPlay(
        (audioData[id]['start'] * 1).toFixed(2),
        (audioData[id]['end'] * 1).toFixed(2)
      );
    } else if(isSound) {
      targetHTML += '<p class="info">声音未打开……</p>';
    }

    //打开视频，则更新视频.
    if (isVideo) {
      targetHTML += '<video controls name="media"><source src="' + baseUrl + id + '.mp4" type="video/mp4"></video>';
    } else if(isVideo) {
      targetHTML += '<p class="info">视频准备中……</p>';
    }

    //设置音标提示内容.
    stage.innerHTML = targetHTML;

  });
}

/**
 * 音标项播放声音处理.
 * @param start {Double}.
 * @param end {Double}.
 */
function itemPlay(start, end){

  if (start && end) {
    //更新播放范围.
    range.start = start;
    range.end = end;
  }

  console.log(range);

  //重设新的播放位置.
  audio.pause();
  audio.currentTime = range['start'];
  audio.play();

  return range;
}
